<template>
  <el-container>
    <!-- 查询结果作品列表 -->
    <el-card class="resultList" style="width: 85%">
      <el-table ref="filterTable" :data="workList" style="width: 100%" @row-click="openDetails">
        <el-table-column label="预览" width="150">
          <template slot-scope="scope">
            <img v-if="scope.row.workType=='文档'" :src="GLOBAL_BASE_URL+'/digital-works/doc-image.png'" class="image">
            <img v-if="scope.row.workType=='图像'" :src="GLOBAL_BASE_URL+'/' + scope.row.workAddress" class="image">
            <!-- <img v-if="scope.row.workType=='文档'" src="http://localhost:8080/digital-works/doc-image.png" class="image"> -->
            <!-- <img v-if="scope.row.workType=='图像'" :src="'http:\\\\localhost:8080\\' + scope.row.workAddress" class="image"> -->
          </template>
        </el-table-column>
        <el-table-column prop="workName" label="作品名称" :formatter="formatter">
        </el-table-column>
        <el-table-column prop="authorName" label="作者" width="120">
        </el-table-column>
        <el-table-column prop="workTime" label="日期" sortable width="120" column-key="date">
        </el-table-column>
        <el-table-column prop="workType" label="类型" width="120"
          :filters="[{ text: '图像', value: '图像' }, { text: '文档', value: '文档' }]" :filter-method="filterTag"
          filter-placement="bottom-end">
          <template slot-scope="scope">
            <el-tag :type="scope.row.workType === '图像' ? 'primary' : 'success'" disable-transitions>{{scope.row.workType}}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="workDescription" label="作品描述" :formatter="formatterDesc" width="280">
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination @current-change="handleCurrentChange" :current-page="queryInfo.pageindex"
        :page-size="queryInfo.pagesize" layout="total, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </el-card>
  </el-container>
</template>

<script>
export default {
  data () {
    return {
      GLOBAL_BASE_URL: this.GLOBAL.BASE_URL,
      select: '1',
      tagName: '',
      // 获取作品列表的参数对象
      queryInfo: {
        query: '',
        pageindex: 1,
        pagesize: 4
      },
      workList: [], // 把获取到的其他作品列表放在这里
      total: 5, // 总数据条数
      userId: ''
    }
  },
  created () {
    this.userId = this.$route.params.id
    this.select = this.$route.params.type
    this.tagName = this.$route.params.name
    this.getWorkList()
  },
  mounted () {
    if (this.timer) {
      clearInterval(this.timer)
    } else {
      this.timer = setInterval(() => {
        if (this.tagName !== this.$route.params.name) {
          console.log(this.tagName)
          this.userId = this.$route.params.id
          this.select = this.$route.params.type
          this.tagName = this.$route.params.name
          this.getWorkList()
        }
      }, 100)
    }
  },
  beforeDestroy () {
    clearInterval(this.timer)
  },
  methods: {
    getWorkList () {
      console.log(this.select)
      // 发起当前组件的首页数据请求
      this.$axios({
        methods: 'POST',
        url: '/user/search',
        params: {
          searchType: this.select,
          tagName: this.tagName,
          pageindex: this.queryInfo.pageindex,
          pagesize: this.queryInfo.pagesize
        }
      })
        .then((response) => {
          console.log(response)
          this.workList = response.data.data
          this.total = response.data.total
        // console.log(this.imgUrl)
        })
        .catch(function (error) { console.log(error) })
      console.log('获取数据')
    },
    // 格式化返回作品名字
    formatter (row, column) {
      return row.workName
    },
    // 格式化返回作品描述
    formatterDesc (row, column) {
      return row.workDescription.substring(0, 9) + '...'
    },
    filterTag (value, row) {
      return row.workType === value
    },
    // filterStatus (value, row) {
    //   return row.workStatus === value
    // },
    filterHandler (value, row, column) {
      const property = column.property
      return row[property] === value
    },
    // 监听表格行，跳到作品详情
    openDetails (row, event, column) {
      console.log(row.workId)
      // this.$router.push('/details/' + row.workId)
      console.log('探索界面 workType' + row.workType)
      if (this.userId) {
        if (row.workType === '图像') {
          const type = 'img'
          this.$router.push('/details/' + this.userId + '/' + type + '/' + row.workId)
        }
        if (row.workType === '文档') {
          const type = 'txt'
          this.$router.push('/details/' + this.userId + '/' + type + '/' + row.workId)
        }
      } else {
        if (row.workType === '图像') {
          const type = 'img'
          this.$router.push('/tourist/details/' + type + '/' + row.workId)
        }
        if (row.workType === '文档') {
          const type = 'txt'
          this.$router.push('/tourist/details/' + type + '/' + row.workId)
        }
      }
    },
    // 监听页码值改变的事件
    handleCurrentChange (newPage) {
      console.log(newPage)
      this.queryInfo.pageindex = newPage
      this.getWorkList()
    }
  }
}
</script>

<style lang="less" scoped>
.el-container {
  display: flex;
  justify-content: center;
}
.el-table img {
  position: relative;
  width: 70px;
  height: 70px;
}

</style>
